import React from "react";
import { useSearchParams, useLocation } from "react-router-dom";
import qs from "qs"

export default function Item() {
  /* 
    useSearchParams():
      - 可以获取路由的query传参
      - 得到一个数组，数字的第一个只就是search参数对象
      - 使用search参数对象的get方法，可以得到某个 传递参数的值
  */
  // const [search] = useSearchParams();
  // console.log(search);
  // console.log(search.get("id"));
  // console.log(search.get("name"));

   /* 
    useLocation()
      * 可以获取当前地址的详细信息组成的对下个
      * 对象中有一个search属性 是当前的查询字符串
      * 我们可以通过第三方包qs 或者 自己遍历 把查询字符串转成对象
   */

    const {search} = useLocation()
    console.log(search); // 打印的结构类似   ?id=3&name=PS4
    //需要将其id和name分别提取出来
    // const result = search.slice(1).split("&").reduce((p, c) => {
    //   const [key, value] = c.split("=");//["id","1"]
    //   p[key] = value
    //   return p
    // }, {})
    // console.log(result);

    //使用qs包：qs.stringify()是将对象序列化成url的形式，以&拼接
            // qs.parse()是将url解析成对象的形式

  const {id,name} = qs.parse(search.slice(1))
  return (
    <div> <h4>{name}游戏---id是{id}</h4> </div>
  )
}